import { t } from 'i18next';
import React from 'react';
import { type NodeProps } from 'reactflow';

import { McpToolConfigType } from '@/types/workflow/mcp';
import { FlowNodeItemType } from '@/types/workflow/node';

import NodeCard from '../render/NodeCard';

const NodeToolSet = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
  const { inputs } = data;
  const toolList: McpToolConfigType[] = inputs.find((item) => item.key === 'toolSetData')?.value
    ?.toolList;

  return (
    <NodeCard minW="350px" selected={selected} {...data}>
      <div className="px-4 pb-4">
        <div className="nowheel flex max-h-[400px] flex-col gap-2 overflow-y-auto px-2">
          {toolList.map((item, index) => {
            return (
              <div
                key={index}
                className="flex cursor-pointer items-center rounded-md bg-fill-2 p-2"
              >
                <div className="ml-2">
                  <div
                    style={{ lineHeight: '22px' }}
                    className="text-sm font-font-weight-400 text-text-5"
                  >
                    {item.name}
                  </div>
                  <div
                    style={{ lineHeight: '20px' }}
                    className="text-xs font-font-weight-400 text-text-3"
                  >
                    {item.description ?? t('core.workflow.Not intro')}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </NodeCard>
  );
};

export default React.memo(NodeToolSet);
